import React, { useEffect, useState } from 'react'
import { Toast, NavBar, Swiper, Tag, TabBar, Space,Badge} from 'antd-mobile'
import { MessageOutline, TruckOutline, ShopbagOutline ,CollectMoneyOutline} from 'antd-mobile-icons'
import { getGoodsDetail } from '../../api/Home'
import type { GoodsListData } from '../../types/home'
import { useLocation } from 'react-router-dom'
import { useHistory } from 'react-router-dom'
import { AddTocart } from '../../store/actionDemo'
import type { CartData } from '../../types/cart'
import store from '../../store/index'
import { UseCartNumber } from '../../hooks/useCartMethod'
import styles from './goods.module.css'

export default function useGoods() {
  const [number, setNumber] = useState<number>(UseCartNumber())
  const [goodsDetas, setGoodsData] = useState<GoodsListData>({} as GoodsListData)
  const [swiperList, setSwiperList] = useState<Array<string>>([])
  // const [cartData, setCartData] = useState<CartData>({} as CartData)
  const location = useLocation()
  const history = useHistory()
  const back = () => {
    history.goBack()
  }

  const data = {
    img: goodsDetas.img1,
    number: 1,
    price: goodsDetas.originprice,
    proid: goodsDetas.proid,
    proname: goodsDetas.proname,
    state: true
  }
  //点击加入购物车
  const addToCart = () => {
    store.dispatch(AddTocart(data))
  }
  const items = swiperList.map((item, index) => (
    <Swiper.Item key={index}>
      <img src={item} style={{ width: "100%", height: "100%" }}></img>
    </Swiper.Item>
  ))

  const getGoodData = async (proid: string) => {
    const res = await getGoodsDetail(proid)
    console.log(res);
    setGoodsData(res.data)
    setSwiperList(res.data.banners[0].split(','))
  }
  useEffect(() => {
    const searchParams = new URLSearchParams(location.search)
    const proid = searchParams.get('proid')
    getGoodData(proid as string)
  }, [])

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      setNumber(UseCartNumber())
    })
    return () => unsubscribe()
  }, [])
  return (
    <div>
      <NavBar back='返回' onBack={back}>
        {goodsDetas.proname}
      </NavBar>
      <Swiper
        style={{ '--height': '400px' }}
        className='adm-swiper' loop
        autoplay>
        {items}
      </Swiper>
      <div className="info">
        <p style={{ fontSize: "16px", fontStyle: "initial" }}>
          <Tag round color='danger' style={{ marginRight: "5px" }}>
            自营
          </Tag>
          {goodsDetas.proname}
        </p>
        <p className="price" style={{ fontSize: "20px", fontWeight: "700" }}>￥{goodsDetas.originprice}</p>
      </div>
      <div className={styles.footer}>
        <Space className={styles.footerBox}>
          <div>
            <CollectMoneyOutline />
            <p>客服</p >
          </div>
          <div onClick={()=>history.push('/cart')}>
            <Badge content={number}>
              <CollectMoneyOutline />
            </Badge>
            <p>购物车</p >
          </div>
          <div>
            <CollectMoneyOutline />
            <p>店铺</p >
          </div>
        </Space>
        <div className={styles.btn} >
          <span onClick={addToCart}>加入购物车</span>
          <span>立即购买</span>
        </div>
      </div>
    </div>
  )
}

      {/* <div className='cartBottom'>
        <div className='goodsAction'>
          <div className='cartIcon'>
            <MessageOutline />
          </div>
          客服
        </div>
        <div className='goodsAction'>
          <div className='cartIcon'>
            <TruckOutline />
          </div>
          购物车
        </div>
        <div className='goodsAction'>
          <div className='cartIcon'>
            <ShopbagOutline />
          </div>
          店铺
        </div>
        <button className='cartBottoms' onClick={addToCart}>
          <div className={'van-button__left'}>
            加入购物车
          </div>
        </button>
        <button className='cartBottoms'>
          <div className={'van-button__right'}>
            提交订单
          </div>
        </button>
      </div> */}
